<template>
	<view>
		商品列表页
		<navigator url="/subpkg_goods/detail/detail">商品详情</navigator>
		<view class="box">
			获取这个盒子的宽高、位置等信息
		</view>
		<view class="box">6666</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted } from 'vue';

	onMounted(() => {
		// 1. 创建一个节点查询器
		const selectQuery = uni.createSelectorQuery()
		// 2. 调用实例方法查询节点信息
		selectQuery.select('.box').boundingClientRect((res) => {
			// 获取宽高和位置
			console.log('select:',res)
		})
		selectQuery.selectAll('.box').boundingClientRect((rects) => {
		      // 获取宽高和位置
		      console.log('selectAll:'+rects)
		})
		selectQuery.selectViewport().boundingClientRect((rect) => {
			console.log('selectViewport:'+rect)
		})
		// 3. 结束查询
		selectQuery.exec()
	})
</script>

<style lang="scss">
	page {
		padding: 30px;
	}

	.box {
		width: 300rpx;
		height: 300rpx;
		margin-top: 40rpx;
		background-color: pink;
	}
</style>